<template>
  <!-- 首页根组件 -->
  <div class="loop w">
    <!-- 轮播图 -->
    <Shuffling></Shuffling>
  </div>
  <div class="content-wrap clearfix">
    <div class="w">
      <!-- 主体左边 -->
      <div class="content">
        <div class="sticky">
          <h2 class="title">特别推荐</h2>
          <ul class="clearfix">
            <li v-for="(item, index) in pageArticleData" :key="item._id">
              <a href="`/article/${item._id}`">
                <img :src="baseURL + item.coverUrl" alt="" />
                <h3 class="qd-a">
                  {{ item.title }}
                </h3>
                <p class="text">
                  {{ item.describe }}
                </p>
              </a>
              <p class="article-san">
                <span class="a-dayuan"
                  ><i class="iconfont icon-user"></i> {{ item.type }}</span
                >
                <span class="a-time"
                  ><i class="iconfont icon-iconset0112 time21"></i
                  >{{ formatDate(item.date) }}</span
                >
                <span class="a-eye"
                  ><i class="iconfont icon-icon-eye-open eye21"></i
                  >{{ item.readingNum }}</span
                >
              </p>
            </li>
          </ul>
          <!-- 文章模块 -->
          <Articles></Articles>
        </div>
      </div>
      <!-- 主体左边之分页模块 -->
      <div class="pagin">
        <h2>友情链接 ：</h2>
        <div class="pagin-friendship">
          <a href="#">可爱丸子老师博客</a>
          <a href="https://www.yezismile.com/">叶子博客</a>
          <a href="#">YZMCMS博客</a>
          <a href="#">杨青博客</a>
          <a href="#">黄琛博客</a>
          <a href="#">老胡博客</a>
          <a href="#">飞洋博客</a>
          <a href="#">青游博客</a>
          <a href="#">罗凌枫博客</a>
          <a href="#">赵凌枫博客</a>
        </div>
      </div>
      <!-- 主体右边 -->
      <HotLabels></HotLabels>
    </div>
  </div>
</template>

<script>
// 引入子组件
import Shuffling from "../components/Shuffling.vue";
import Articles from "../components/Articles.vue";
import Pagination from "../components/Pagination.vue";
import HotLabels from "../components/HotLabels.vue";
export default {
  name: "Home",
  // 定义子组件的名称
  components: {
    Shuffling,
    Articles,
    Pagination,
    HotLabels,
  },
  data() {
    return {
      pageArticleData: [], //文章数据列表
      allArticleData: [], //所有文章数据
      skip: 6,
    };
  },
  methods: {
    // 请求所有的文章数据
    async getArticles() {
      let { data } = await this.$axios({
        method: "GET",
        url: "/getdata/article",
      });
      if (data.code) return this.$message.error(data.message);
      this.allArticleData = data.data; // 所有文章数据给allArticle
      this.pageArticleData.push(...this.allArticleData.slice(0, this.skip));
    },
    // 时间格式转换
    formatDate(date) {
      let d = new Date(date),
        YY = d.getFullYear(),
        MM = d.getMonth() + 1,
        DD = d.getDate(),
        hh = d.getHours(),
        mm = d.getMinutes(),
        ss = d.getSeconds();
      hh = hh < 10 ? "0" + hh : hh;
      mm = mm < 10 ? "0" + mm : mm;
      ss = ss < 10 ? "0" + ss : ss;
      return `${YY}-${MM}-${DD}`;
    },
  
  },
  created() {
    this.getArticles();
  },
};
</script>

<style lang="less" scoped>
.loop {
  margin-top: 70px;
  height: 500px;
  background-color: #fff;
}
.content-wrap {
  position: relative;
  width: 100%;
  margin-top: 20px;
}
// 主体左边

.content-wrap .content {
  display: block;
  margin-right: 305px;
}
.content-wrap .sticky {
  float: left;
  width: 100%;
  // height: 500px;
  background-color: #fff;
  margin-bottom: 120px;
}
.sticky .title {
  height: 20px;
  padding: 6px 20px;
  border-bottom: 1px solid #eaeaea;
  background-color: #f7f7f7;
  border-radius: 5px 5px 0 0;
  font-weight: 400;
  font-size: 15px;
}
.sticky ul li {
  position: relative;
  float: left;
  width: 50%;
  margin-bottom: 1px;
  border: 1px solid #ccc;
  border-top: none;
  border-left: none;
  box-sizing: border-box;
}
.sticky ul li a {
  display: block;
  padding: 15px 20px 20px 20px;
  box-sizing: border-box;
}
.sticky ul li:hover {
  background-color: #fafff8;
}
.sticky ul li:hover .qd-a {
  color: #64b356;
}
.sticky ul li:hover .text {
  color: #6a6b6e;
}
.sticky ul li img {
  float: left;
  width: 110px;
  height: 80px;
  border-radius: 5px;
}
.sticky ul .qd-a {
  // float: left;
  color: #555;
  margin: 0px 0 0 120px;
}
.sticky ul .text {
  // float: left;
  height: 55px;
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  word-spacing: normal;
  vertical-align: middle;
  margin-left: 120px;
}
.content-wrap .sidebar {
  float: right;
  width: 290px;
  // height: 500px;
  margin-left: -290px;
}
.article-san{
  margin-left: 140px;
}
.article-san span{
  margin-right: 20px;
}

// 分页
.content-wrap .pagin {
  position: absolute;
  bottom: 10px;
  width: 1200px;
  height: 100px;
  background-color: #fff;
}
.pagin h2 {
  padding: 10px 20px;
  border-bottom: 1px solid #ccc;
}
.pagin .pagin-friendship {
  width: 100%;
  height: 50px;
  line-height: 50px;
}
.pagin-friendship a {
  color: #000;
  height: 50px;
  line-height: 5px;
  font-size: 18px;
  font-family: "隶书";
  margin: 0px 5px 0 20px;
}
.pagin-friendship a:hover {
  color: #64b356;
}
</style>
